<template>
  <div class="demo">
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <!-- <h2>学生年龄：{{age+1}}</h2> -->
    <!-- 测试修改年龄，用自定义参数接收props中的年龄 -->
    <h2>学生年龄：{{myAge+1}}</h2>
    <button @click="updateAge">修改接收到的年龄</button>
  </div>
</template>

<script>
export default {
    name:'Student',
    data() {
        return {
            msg:'学生信息',
           // 如果要修改接收的参数，就在data中声明一个参数来接收props传过来的参数，注意参数名不能重复
            myAge:this.age 
        }
    },
    // 接收父组件参数，和顺序无关，不要声明无关的参数
    //第一种方式：（简单声明接收，只接收）
    // props:["name","age","sex"]
    //第二种方式：（接收的同时对数据类型限制）
    // props:{
    //   name:String,
    //   age:Number,
    //   sex:String
    // }
    //第三种方式：接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
    props:{
        //名字必须得传
        name:{
            type:String, //name的类型是字符串
            required:true, //name是必传的
        },
        age:{
            type:Number,
            default:99 //不传就使用默认值
        },
        sex:{
            type:String,
            required:true
        }
    },
    methods:{
      //直接修改接收的参数，可以修改，但是控制台会报错，不建议直接修改
      updateAge(){
        // this.age = 1000
        // 改的时候不要该props中的年龄，改data中用来接收props中age的参数
        this.myAge++
      }
    }
}
</script>

<style>
.demo{
    background-color: orange;
}
</style>